<template>
	<view class="">
		<!-- 顶部信息 -->
		<view class="HomeTop">
		  <view class="logoView">
			<!-- logo -->
			<img class="logo" src="/static/index/logo.jpg" alt="" />
		  </view>
		  <view class="inputView">
			<input class="textinput" style="center" type="text"   placeholder="寻找商品"/>
		  </view>
		</view>
		
		<!-- 顶部导航  scroll-view -->
		<view class="tabs">
		    <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false">
		        <view @click="onCate(index)" v-for="(item,index) in cateList" :key="item.id" class="uni-tab-item"  data-current="0" >
		            <text class="uni-tab-item-title" :class="cateCurrent==index?'uni-tab-item-title-active':''">
						{{item.catename}}
					</text>
		        </view>
		    </scroll-view> 
		</view>
		<!-- 推荐轮播图 -->
		<view class="">
			<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="baseUrl+item.img" mode=""></image>
					</view>
				</swiper-item>

				
			</swiper>
		</view>
		
		<!-- 功能导航开始 -->
		<!-- 功能导航 -->
		<view class="FunctNavCon">
		  <view class="FunctNavLi">
			<image src="../../static/index/xiaohuoban.png" alt class="FunImg" />
			<p>限时抢购</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/jifentixicopy.png" alt class="FunImg" />
		  			<p>积分商城</p>
		  </view>
		  <view class="FunctNavLi">
		  			<image src="../../static/index/lianxiwomen.png" alt class="FunImg" />
		  			<p>联系我们</p>
		  </view>
		  <view class="FunctNavLi"  @click="toClassify"> 
		  			<image src="../../static/index/-shangpinfenlei-gai.png" alt class="FunImg" />
		  			<p>商品分类</p>
		  </view>
		</view>
		
		<!-- 推荐部分 未写 -->
		<view class="HotGoods">
			<!-- 热推左侧 -->
			<view class="HotLeft">
				<view class="LimitedContent">
				  <image class="LimitedImg" src="../../static/index/xianshi.jpg" alt />
				  <label class="Limited">限时秒杀</label>
				</view>
				<p class="LimitedTitle">每天零点场，好货秒不停</p>
				<!-- 倒计时 -->
				<view class="LimitTimeAll">
				  <label class="LimitTime">{{killtime.hour}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{killtime.minute}}</label>
				  <view class="maohao">:</view>
				  <label class="LimitTime">{{killtime.second}}</label>
				  <label class="Seckill">秒杀</label>
				</view>
				<image src="../../static/index/goods2.jpg" class="LimitedgoodsImg" alt="">
			</view>
			
			<!-- 热推右侧 -->
			<view class="HotRight">
				<!-- 右侧顶部部分 -->
				<view class="HotTop">
					<view class="HomeTopInfo">
						<view class="HomeTopInfoOne">
							<label class="BrandNew">品牌上新</label>
							<label class="Discount">折</label>
						</view>
						<view class="HomeTopRobbig">
							<label>每日九点，抢大牌</label>
						</view>
					</view>		
					<!-- <div> -->
					<view class="Cloth">
						<image  src="../../static/index/goods1.jpg" alt="">
					</view>
					
					<!-- </div> -->				
				</view>
				<!-- 右侧底部 -->
				<view class="HotBottom">
					<view class="HotBottomLeft">
						<view class="HotBottomLeftInfo">
							<label class="HotBottomLeftInfoTitle">每日十件</label>
							<label class="HotBottomLeftInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomLeftImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
					<view class="HotBottomRight">
						<view class="HotBottomRightInfo">
							<label class="HotBottomRightInfoTitle">每日十件</label>
							<label class="HotBottomRightInfoDetail">只为你选好货</label>
						</view>
						<view class="HotBottomRightImage">
							<image src="../../static/index/goods1.jpg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		  <!-- 轮播图2 -->
		<div class="Swiper2">
		  <image class="Swiper2Img" src="../../static/index/swiper1.jpg" alt />
		</div>
		
		<!-- 底部商品列表 -->
		<view class="products">
			<!-- 商品标签 -->
			<view class="tags">
				<view @click="tabChange(index)" v-for="(item,index) in tabList" :key="index" class="tag_list" :class="tabCurrent==index?'active_tag_list':''">
					<label for="">{{item}}</label>
				</view>
			</view>
			<!-- 标签对应的商品 -->
			<view class="tags_product" v-if="goodList.length>0">
				
				<view @click="toDetail(item.id)" class="product" v-for="(item,index) in goodList[tabCurrent].content" :key="item.id">	
					<view class="GoodsLeft">
						<image class="GoodsImg" :src="baseUrl+item.img" alt />
					</view>
					<view class="GoodsCont">
						<view class="GoodConTit">{{item.goodsname}}</view>
						<view class="GoodsPrice">￥{{item.price}}</view>
						<view class="yimai">已售{{item.market_price}}件</view>
						<view class="Immed">立即抢购</view>
					</view>					
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from "../../utils/config.js"
	var timer= null
	export default{
		data(){
			return{
				cateList:[],  //顶部的tab栏
				cateCurrent:0,
				bannerList:[],
				tabList:['热门推荐','发现好货','只看专场'],
				tabCurrent:0,
				goodList:[],
				baseUrl:baseUrl,
				killtime:{hour:0,minute:0,second:0}
			}
		},
		async mounted(){
			//首页顶部导航栏
			var result = await this.http("/api/getcate").catch(err=>{
				console.log(err);
			})  //请求接口
			// console.log(result);
			this.cateList = result.data.list
			
			var result = await this.http("/api/getbanner").catch(err=>{
				console.log(err);
			})
			// console.log(result);
			this.bannerList = result.data.list
			
			//倒计时模块
			this.secondKill()
			timer=setInterval(()=>{
				this.secondKill()
			},1000)
			
			
			//首页商品列表
			var result = await this.http("/api/getindexgoods").catch(err=>{
				console.log(err);
			})
			// console.log(result);
			this.goodList = result.data.list
			// console.log(this.goodList);
		},
		methods:{
			
			//秒杀的部分模块
			async secondKill(){
				var result = await this.http("/api/getseckill").catch(err=>{
					console.log(err);
				})
				// console.log(result);
				if(result.data.list==null){
					clearInterval(timer);
					return
				}
				var begintime = result.data.list[0].begintime;
				var nowtime = new Date().getTime()
				//时间距离 秒为单位 时间戳为毫秒
					var distance = (begintime-nowtime)/1000
					distance = Math.floor(distance)
					var hour = Math.floor(distance/3600)
					var minute = Math.floor(distance%3600/60)
					var second = Math.floor(distance%60)
					this.killtime = {hour,minute,second}
				
				if(distance<=-1){
					clearInterval(timer);
					hour="00"
					minute="00"
					second="00"
					this.killtime = {hour,minute,second}
					return
				}
			},
			
			
			
			//顶部导航栏的跳转页面
			onCate(index){
				// console.log(index);
				this.cateCurrent = index
				var id = index+1
				// console.log(id,"=======");
				uni.navigateTo({
					url:"/pages/product/product?id="+id
				})
			},
			//去分类页面
			toClassify(){
				uni.navigateTo({
					url:"/pages/classify/classify"
				})
			},
			tabChange(index){
				this.tabCurrent = index
			},
			//跳转到详情页面
			toDetail(id){
				uni.navigateTo({
					url:"/pages/details/details?id="+id
				})
			}
			
		}
		
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/index.css");
</style>
